﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>

<%--<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ingreso al sistema ENT-Project Management</title>
    <style type="text/css">
        /* CSS Document resources/images/default/bg.gif*/
        *
        {
            margin: 0;
            padding: 0;
        }
        h1, h2, h3, h4, h5, h6, p, pre, blockquote, fieldset, table, ul
        {
            margin: 1em 0;
        }
        img
        {
            border: 0;
        }
        a:link
        {
            color: #006eab;
            text-decoration: none;
            border-bottom: 1px dotted #006eab;
        }
        a:visited
        {
            color: #04527d;
            text-decoration: none;
            border-bottom: 1px dotted #04527d;
        }
        a:hover
        {
            color: #0285cd;
            text-decoration: none;
            border-bottom: none;
        }
        span
        {
            color: #002337;
        }
        .clear
        {
            clear: both;
        }
        .clearfix:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix
        {
            display: inline-block;
        }
        /* Hides from IE-mac \*/
        * html .clearfix
        {
            height: 1%;
        }
        .clearfix
        {
            display: block;
        }
        /* End hide from IE-mac */
        body
        {
            font: 62.5%/1.6 Arial, Helvetica, sans-serif;
            background: url(resources/images/default/bg.png) repeat-x top left #1f2331;
            text-align: center;
            color: #33394d;
        }
        #header
        {
            height: 84px;
            width: 994px;
            margin: 0px auto;
            position: relative;
        }
        #logo
        {
            position: absolute;
            top: 18px;
            left: 50px;
        }
        ul#navBar
        {
            height: 84px;
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
        ul#navBar li
        {
            float: left;
            display: block;
            width: auto;
            height: 84px;
            padding: 0px 0px 0px 1px;
        }
        ul#navBar li a:link, ul#navBar li a:visited
        {
            float: left;
            display: block;
            width: auto;
            margin: 0px;
            height: 34px;
            padding: 25px 10px;
            text-decoration: none;
            font-weight: normal;
            background: url(resources/images/default/nav_bg.png) repeat-x top left;
            font-family: Cambria, "Times New Roman" , Georgia, Times, serif;
            font-size: 1.8em;
            color: #ededed;
            border: none;
        }
        ul#navBar li.current a:link, ul#navBar li.current a:visited
        {
            background: url(resources/images/default/nav_hover.png) repeat-x top left;
        }
        ul#navBar li a:hover
        {
            color: #fff;
            text-decoration: none;
            background: url(resources/images/default/nav_hover.png) repeat-x top left;
            border: none;
        }
        #welcomeMessage{
        height: 185px;
        width: 944px;
        margin: 0px auto;
        padding: 25px;
        position: relative;
        background: url(resources/images/default/logoSP.png) no-repeat 85% 60%;
        text-align: left;
        }
        h1
        {
            margin: 0.7em;
            font-size: 2.2em;
            font-weight: normal;
            font-family: "Trebuchet MS" , Verdana, Arial, sans-serif;
            color: #33394c;
        }
        #welcomeMessage p
        {
            margin: 0.5em 0.5em 0.5em 3em;
            width: 520px;
            padding: 0em;
            font-size: 1.4em;
            font-family: "Trebuchet MS" , Verdana, Arial, sans-serif;
            color: #494949;
            line-height: 1.4em;
        }
        /*************** End Top Fixed Sections *************************************/
        /*************** Start Content Section *************************************/
        #wrapper
        {
            width: 994px;
            margin: 0px auto;
            padding: 0px;
            background: url(resources/images/default/content_bg.png) repeat-y top left;
        }
        #secWrapper
        {
            width: 994px;
            margin: 0px auto;
            padding: 20px 0px 0px 0px;
            background: url(resources/images/default/content_top.png) no-repeat top left;
        }
        #container
        {
            width: 964px;
            margin: 0px auto;
            padding: 0px 15px 30px 15px;
            background: url(resources/images/default/content_bottom.png) no-repeat bottom left;
        }
        #mainCol
        {
            width: 300px;
            float: left;
            margin: 0px;
            padding: 0px;
            text-align: left;
        }
        #mainCol #services
        {
            position: relative;
            background: url(resources/images/default/service_bg.jpg) no-repeat top left;
            width: 643px;
            padding: 0px;
            padding-top: 46px;
            height: 143px;
            margin-bottom: 10px;
        }
        #services h3
        {
            font-size: 18px;
            color: #112638;
            font-weight: normal;
            margin: 0px;
            padding: 0px;
            font-family: Cambria, Georgia, "Times New Roman" , Times, serif;
            position: absolute;
            top: 10px;
            left: 20px;
        }
        #mainCol #services ul
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #mainCol #services ul li
        {
            float: left;
            display: block;
            width: 180px;
            height: 120px;
            padding: 5px;
            margin: 0px 8px 0px 15px;
            text-align: left;
        }
        #mainCol #services ul li h4
        {
            font-size: 14px;
            color: #112638;
            font-weight: bold;
            margin: 0px;
            padding: 0px;
            font-family: Cambria, Georgia, "Times New Roman" , Times, serif;
        }
        #mainCol #services ul li p
        {
            color: #414141;
            font-size: 12px;
            margin: 2px;
            padding: 0px;
            text-align: left;
        }
        #mainCol ul#maincon
        {
            border: 1px solid #cde1f5;
            margin: 0px;
            padding: 6px;
            width: 625px;
            list-style-type: none;
            background: url(resources/images/default/main_col_bg.png) no-repeat top left #f8fcff;
        }
        #mainCol ul#maincon li
        {
            width: 625px;
            padding: 5px 0px 10px 0px;
            margin: 0px 0px 5px 0px;
            border-bottom: 1px dotted #aeaeae;
        }
        #mainCol ul#maincon li.last
        {
            border: none;
        }
        #mainCol ul#maincon li img
        {
            width: 153px;
            height: 117px;
            padding: 1px;
            margin: 6px 0px 0px 0px;
            float: left;
            border: 2px solid #cde1f5;
        }
        #mainCol ul#maincon li h2
        {
            font-size: 18px;
            color: #34394e;
            font-family: Cambria, Georgia, "Times New Roman" , Times, serif;
            font-weight: normal;
            padding: 0px;
            margin: 0px 0px 0px 170px;
        }
        #mainCol ul#maincon li p
        {
            font-size: 13px;
            color: #4d4d4d;
            margin: 0px;
            padding: 0px;
            margin-left: 170px;
        }
        #secCol
        {
            width: 320px;
            float: right;
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        fieldset#login
        {
            background: url(resources/images/default/login_bg.png) no-repeat top left;
            margin: 0px auto;
            padding: 5px 5px 5px 5px;
            width: 276px;
            height: 179px;
            font-size: 1.4em;
            border: none;
            position: relative;
            left: 15px;
        }
        #login h4
        {
            font-size: 18px;
            font-weight: normal;
            font-family: Cambria, Georgia, "Times New Roman" , Times, serif;
            width: 246px;
            height: 31px;
            padding: 4px 0px 0px 30px;
            margin: 0px;
            text-align: left;
        }
        #login form
        {
            height: 95px;
            width: 276px;
            padding: 10px 0px 0px 0px;
            margin: 0px;
        }
        #login p
        {
            width: 276px;
            margin: 0px;
            padding: 0px;
            font-family: Arial, Helvetica, sans-serif;
        }
        #login form p label
        {
            text-align: left;
            margin-left: 0.5em;
            float: left;
            font-size: 14px;
        }
        #login form p.check
        {
            padding-left: 77px;
            width: 199px;
            height: 23px;
        }
        #login #remlabel
        {
            float: left;
            font-size: 12px;
            position: relative;
            left: -3px;
        }
        #login #remember
        {
            float: left;
            width: 14px;
            height: 14px;
            margin: 0px;
            padding: 0px;
            position: relative;
            top: 3px;
        }
        #login #submit
        {
            background: url(resources/images/default/login.png) no-repeat top left;
            width: 77px;
            height: 27px;
            cursor: pointer;
            border: none;
            float: right;
        }
        #login #username, #login #password
        {
            background: url(resources/images/default/input_bg.png) no-repeat top left;
            border: 1px solid #d0d0d0;
            width: 192px;
            height: 19px;
            padding: 2px;
            color: #222222;
            font-size: 14px;
            float: right;
            margin-bottom: 10px;
        }
        #login p.member
        {
            text-align: left;
            width: 270px;
            font-size: 11px;
            font-family: Arial, Helvetica, sans-serif;
            margin: 2px 2px 0px 2px;
            padding: 2px;
            line-height: 18px;
        }
        h3#news, h3#test, h3#why
        {
            position: relative;
            left: 21px;
            background: url(resources/images/default/latest_bg.png) no-repeat top left;
            width: 289px;
            text-align: left;
            height: 33px;
            padding: 3px 5px 3px 25px;
            margin: 0px;
            margin-top: 10px;
            color: #fff;
            font-size: 18px;
            font-weight: normal;
            font-family: Cambria, Georgia, "Times New Roman" , Times, serif;
        }
        h3#test
        {
            background: url(resources/images/default/test_bg.png) no-repeat top left;
        }
        h3#why
        {
            background: url(resources/images/default/why_bg.png) no-repeat top left;
            width: 284px;
            position: relative;
            left: -20px;
            padding: 3px 5px 3px 30px;
        }
        #secCol ul
        {
            position: relative;
            left: 15px;
            border: 1px solid #d0d0d0;
            border-bottom: none;
            list-style-type: none;
            width: 285px;
            margin: 0px auto;
            margin-bottom: 10px;
            padding: 0px;
            text-align: left;
        }
        #secCol ul li
        {
            display: block;
            margin: 0px;
            padding: 5px;
            width: 275px;
            background: url(resources/images/default/side_col_bg.png) no-repeat top left #fff;
            border-bottom: 1px solid #d0d0d0;
        }
        #secCol ul li h4
        {
            font-size: 14px;
            font-weight: normal;
            margin: 0px;
            padding: 0px;
        }
        #secCol ul li span
        {
            color: #6b6b6b;
            font-weight: bold;
        }
        #secCol ul li p
        {
            color: #4d4d4d;
            font-size: 12px;
            margin: 2px;
            padding: 2px;
        }
        #secCol ul li a.more:link, #secCol ul li a.more:visited, #secCol ul li a.more:hover
        {
            background: url(resources/images/default/arrow.png) no-repeat center left;
            margin: 0px 0px 0px 200px;
            padding: 0px;
            display: inline;
            padding-left: 12px;
            border: none;
            text-decoration: underline;
            font-size: 12px;
            text-align: right;
        }
        #secCol ul li a.more:hover
        {
            text-decoration: none;
        }
        #secCol ul li p.test
        {
            text-align: right;
        }
        #footer
        {
            width: 994px;
            margin: 5px auto;
            font-size: 12px;
            color: #d9d7d7;
            padding: 0px;
        }
        #footer p
        {
            margin: 2px;
            padding: 2px;
            font-size: 12px;
            font-family: arial;
        }
        #footer ul
        {
            list-style-type: none;
            display: inline;
        }
        #footer ul li
        {
            display: inline;
        }
        #footer ul li a:link, #footer ul li a:visited
        {
            border: none;
            color: #d9d7d7;
            text-decoration: underline;
        }
        #footer ul li a:hover
        {
            color: #fff;
            text-decoration: none;
        }
        
        
        /* Gallery styles */
        
        #gallery
        {
            /* CSS3 Box Shadow */
            -moz-box-shadow: 0 0 3px #AAAAAA;
            -webkit-box-shadow: 0 0 3px #AAAAAA;
            box-shadow: 0 0 3px #AAAAAA; /* CSS3 Rounded Corners */
            -moz-border-radius-bottomleft: 4px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            -webkit-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
            border: 1px solid white;
            background: url(resources/images/default/slider/panel.jpg) repeat-x bottom center #ffffff; /* The width of the gallery */
            width: 550px;
            overflow: hidden;
        }
        
        #slides
        {
            /* This is the slide area */
            height: 180px; /* jQuery changes the width later on to the sum of the widths of all the slides. */
            width: 550px;
            overflow: hidden;
        }
        
        .slide
        {
            float: left;
        }
        
        #menu
        {
            /* This is the container for the thumbnails */
            height: 45px;
        }
        
        ul
        {
            margin: 0px;
            padding: 0px;
        }
        
        li
        {
            /* Every thumbnail is a li element */
            width: 60px;
            display: inline-block;
            list-style: none;
            height: 45px;
            overflow: hidden;
        }
        
        li.inact:hover
        {
            /* The inactive state, highlighted on mouse over */
            background: url(resources/images/default/slider/pic_bg.png) repeat;
        }
        
        li.act, li.act:hover
        {
            /* The active state of the thumb */
            background: url(resources/images/default/slider/active_bg.png) no-repeat;
        }
        
        li.act a
        {
            cursor: default;
        }
        
        .fbar
        {
            /* The left-most vertical bar, next to the first thumbnail */
            width: 2px;
            background: url(resources/images/default/slider/divider.png) no-repeat right;
        }
        
        li a
        {
            display: block;
            background: url(resources/images/default/slider/divider.png) no-repeat right;
            height: 35px;
            padding-top: 10px;
        }
        
        a img
        {
            border: none;
        }
        
        
        /* The styles below are only necessary for the demo page */
        
        h1
        {
            font-family: "Myriad Pro" ,Arial,Helvetica,sans-serif;
            font-size: 26px;
            font-weight: normal;
            margin-bottom: 15px;
        }
        
        h2
        {
            font-family: "Myriad Pro" ,Arial,Helvetica,sans-serif;
            font-size: 12px;
            font-weight: normal;
            position: absolute;
            right: 0;
            text-transform: uppercase;
            top: 15px;
        }
        
        #main
        {
            /* The main container */
            margin: 15px auto;
            text-align: center;
            width: 920px;
            position: relative;
        }
        
        a, a:visited
        {
            color: #0196e3;
            text-decoration: none;
            outline: none;
        }
        
        a:hover
        {
            text-decoration: underline;
        }
        
        p
        {
            padding: 10px;
            text-align: center;
        }
    </style>
    <script src="resources/js/jquery.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            /* This code is executed after the DOM has been completely loaded */

            var totWidth = 0;
            var positions = new Array();

            $('#slides .slide').each(function (i) {

                /* Traverse through all the slides and store their accumulative widths in totWidth */

                positions[i] = totWidth;
                totWidth += $(this).width();

                /* The positions array contains each slide's commulutative offset from the left part of the container */

                if (!$(this).width()) {
                    alert("Please, fill in width & height for all your images!");
                    return false;
                }

            });

            $('#slides').width(totWidth);

            /* Change the cotnainer div's width to the exact width of all the slides combined */

            $('#menu ul li a').click(function (e, keepScroll) {

                /* On a thumbnail click */

                $('li.menuItem').removeClass('act').addClass('inact');
                $(this).parent().addClass('act');

                var pos = $(this).parent().prevAll('.menuItem').length;

                $('#slides').stop().animate({ marginLeft: -positions[pos] + 'px' }, 450);
                /* Start the sliding animation */

                e.preventDefault();
                /* Prevent the default action of the link */


                // Stopping the auto-advance if an icon has been clicked:
                if (!keepScroll) clearInterval(itvl);
            });

            $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
            /* On page load, mark the first thumbnail as active */



            /*****
            *
            *	Enabling auto-advance.
            *
            ****/

            var current = 1;
            function autoAdvance() {
                if (current == -1) return false;

                $('#menu ul li a').eq(current % $('#menu ul li a').length).trigger('click', [true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
                current++;
            }

            // The number of seconds that the slider will auto-advance in:

            var changeEvery = 5;

            var itvl = setInterval(function () { autoAdvance() }, changeEvery * 1000);

            /* End of customizations */
        });  
    </script>
    <script type="text/javascript">
        var IngresoOk = function (response, result, control, type, action, extraParams) {
            try 
            {
                    if (result.extraParamsResponse.location == 'True')
                        document.location = 'Principal.aspx';
                    else
                        Ext.Msg.alert('Error', result.extraParamsResponse.message);
                
               
            } catch (e) {
                alert('IngresoOk'+e);
            }

        };
        var handleError = function () {
           
            Ext.Msg.alert('Error', 'Error');
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <div id="header">
        <a href="#">
            <img src="resources/images/default/logo.png" title="Service Proyect" id="logo"
                alt="Logo" /></a>
    </div>
    <div id="welcomeMessage">
        <h1>
            Seguimiento, Planificación y Evaluación de Proyectos</h1>
        <p>
            Es una solución web, que permite gestionar toda la información de la entidad y hacer
            uso de la misma para aprovecharla de forma estratégica y alinearla a los objetivos
            y metas del cliente, permitiendo llevar el control de tareas en aspectos como la
            planificación, ejecución.
        </p>
    </div>
    <div id="wrapper">
        <div id="secWrapper">
            <div id="container" class="clearfix">
                <div id="mainCol" class="clearfix">
                    <div id="gallery">
                        <div id="slides">
                            <div class="slide">
                                <img src="resources/images/default/slider/frontalSP.png" width="550" height="145" alt="side" /></div>
                            <div class="slide">
                                <img src="resources/images/default/slider/iphone.jpg" width="550" height="145" alt="side" /></div>
                            <div class="slide">
                                <img src="resources/images/default/slider/frontalSP.png" width="550" height="145" alt="side" /></div>
                            <div class="slide">
                                <a href="#" target="_blank">
                                    <img src="resources/images/default/slider/info.jpg" width="550" height="145" alt="side" /></a></div>
                        </div>
                        <div id="menu">
                            <ul>
                                <li class="fbar">&nbsp;</li><li class="menuItem"><a href="">
                                    <img src="resources/images/default/slider/frontalSP24x24.png" alt="thumbnail" /></a></li><li
                                        class="menuItem"><a href="">
                                     <img src="resources/images/default/slider/thumb_iphone.png" alt="thumbnail" /></a></li><li
                                                class="menuItem"><a href="">
                                     <img src="resources/images/default/slider/thumb_imac.png" alt="thumbnail" /></a></li><li
                                                        class="menuItem"><a href="">
                                     <img src="resources/images/default/slider/thumb_about.png" alt="thumbnail" /></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="secCol">
                    <fieldset id="login">
                        <h4>Ingresar</h4>
                        <ext:Panel ID="Panel2" runat="server" Border="false" Padding="15" Shadow='Frame'>
                            <Items>
                                <ext:TextField ID="txtUsername" SelectOnFocus="true" runat="server" ReadOnly="false"
                                    FieldLabel="Usuario" LabelAlign="Top" AllowBlank="false" BlankText="El usuario es requerido."
                                    Text="" EnableKeyEvents="true" />
                                <ext:TextField ID="txtPassword" runat="server" ReadOnly="false" InputType="Password"
                                    FieldLabel="Clave" LabelAlign="Top" AllowBlank="false" BlankText="La clave es requerida."
                                    Text="" EnableKeyEvents="true">
                                    <DirectEvents>
                                        <KeyPress OnEvent="Button1_Click" Success="IngresoOk(response, result, el, type, action, extraParams);" Failure="handleError"  Before=" 
                                                        if(e.getKey()==Ext.EventObject.ENTER) 
                                                        {
                                                            e.preventDefault();
                                                            return(true);
                                                        }
                                                        return(false);
                                                    ">
                                            <EventMask ShowMask="true" Msg="Verificando..." />
                                        </KeyPress>
                                    </DirectEvents>
                                </ext:TextField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnIngresar" runat="server" Text="Aceptar" Icon="Accept">
                                    <DirectEvents>
                                        <Click OnEvent="Button1_Click" Success="IngresoOk(response, result, el, type, action, extraParams);"  Failure="handleError" >
                                            <EventMask ShowMask="true" Msg="Verificando..." />
                                        </Click>
                                    </DirectEvents>
                                    <Listeners>
                                        <Click Handler="
                                                if(!#{txtPassword}.validate() || !#{txtUsername}.validate() ) 
                                                {
                                                    Ext.Msg.alert('Error','El usuario y/o password son campos obligatorios');
                                                    return false; 
                                                }" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                            <Listeners>
                                <Show Handler="#{btnIngresar}.focus();" />
                            </Listeners>
                        </ext:Panel>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <p>
             Copyrights &copy; 2012 <img src="resources/images/default/footer_logo.png" alt=""/>
            
        </p>
    </div>
    </form>
</body>
</html>
